<template>
  <view class="coupon bg-white">
    <view class="p-20">
      <template v-if="couponList.length">
        <my-coupon
          v-for="(item, index) in couponList"
          :data="item.coupon"
          :is-used="item.status != 'no_used'"
          :show-use-button="item.status == 'no_used'"
          :key="index"
        ></my-coupon>
      </template>
      <my-empty v-else type="coupon"></my-empty>
    </view>
  </view>
</template>

<script setup>
import { onShow } from "@dcloudio/uni-app";
import { ref } from "vue";
import { useStore } from "vuex";

const store = useStore();

const couponList = ref([]);

onShow(async () => {
  const response = await store.dispatch("fetchCouponList");
  if (response.records.length) {
    couponList.value = response.records;
  }
});
</script>

<style lang="scss" scoped>
.coupon {
  height: 100%;
}
</style>
